<template>
  <div class="page-container">
    <lan-header :config="headerConfig"></lan-header>
    <div class="device-create-form">
      <lan-form
        :config="formConfig"
        :formData="createForm"
        class="lan-form"
      ></lan-form>
      <div class="device-add-map">
        <device-map
          @amapData="getAMapData"
          ref="deviceMap"
        ></device-map>
      </div>
    </div>
  </div>
</template>

<script>
import lanHeader from '../../../components/lanHeader';
import LanForm from '../../../components/lanForm';
import DeviceMap from './deviceMap';
import { Message } from 'element-ui';
import { parseError } from '../../../utils';
import { createDeviceApi } from '../../../api/device';
import { queryDeviceTypeListApi } from '../../../api/deviceType';
import { queryFactoryListApi } from '../../../api/factory';
import { validateForm } from './service';

export default {
  name: 'AddDevice',
  components: {
    DeviceMap,
    lanHeader,
    LanForm
  },
  data() {
    return {
      headerConfig: {
        title: '设备列表',
        buttons: [
          {
            text: '保存',
            icon: 'el-icon-folder-checked',
            type: 'primary',
            size: 'small',
            method: () => {
              this.create();
            }
          }
        ]
      },
      formConfig: {
        inline: false,
        size: 'normal',
        hideLabel: false,
        formList: [
          {
            name: 'name',
            label: '设备名称',
            type: 'input',
            placeholder: '请输入设备名称',
            required: true,
            tooltip: '设备名称',
            width: 280
          },
          {
            name: 'typeUuid',
            type: 'remoteSelect',
            label: '设备类型',
            options: () => this.deviceTypeList,
            optionValue: 'uuid',
            optionLabel: 'name',
            placeholder: '设备类型',
            tooltip: '选择设备所属的类型',
            required: true,
            width: 280,
            query: () => {
              this.remoteDeviceTypeSearch();
            }
          },
          {
            name: 'factoryUuid',
            type: 'remoteSelect',
            label: '工厂',
            options: () => this.factoryList,
            optionValue: 'uuid',
            optionLabel: 'name',
            placeholder: '请选择工厂',
            tooltip: '选择设备所属的工厂',
            width: 280,
            query: () => {
              this.remoteFactoryListSearch();
            }
          },

          {
            name: 'serialNumber',
            label: '序列号',
            type: 'input',
            placeholder: '请输入序列号',
            required: true,
            tooltip: '设备的序列号（SN/IMEI）或出厂编号，该编号是全局唯一的，不能重复',
            width: 280
          },
          {
            name: 'description',
            label: '设备描述',
            type: 'input',
            placeholder: '请输入设备描述',
            tooltip: '设备的描述或备注信息',
            width: 280
          }
        ]
      },
      btnLoading: false,
      remoteLoading: false,
      createForm: {
        typeUuid: '',
        factoryUuid: '',
        name: '',
        serialNumber: '',
        description: '',
        latitude: 0,
        longitude: 0,
        location: ''
      },
      factoryList: [],
      deviceTypeList: []
    };
  },
  created() {
    this.remoteDeviceTypeSearch();
    this.remoteFactoryListSearch();
  },
  mounted() {
    this.$refs.deviceMap.judgeEditOrAdd();
  },
  methods: {
    create() {
      const validError = validateForm(this.createForm);
      if (validError) return Message.warning(validError);
      this.btnLoading = true;
      createDeviceApi(
        this.createForm.typeUuid,
        this.createForm.factoryUuid,
        this.createForm.name,
        this.createForm.serialNumber,
        this.createForm.description,
        this.createForm.latitude,
        this.createForm.longitude,
        this.createForm.location
      )
        .then(res => {
          Message.success('成功创建设备');
          this.$emit('refresh');
          this.$router.replace('/device/list/');
        })
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.btnLoading = false));
    },
    remoteDeviceTypeSearch(query) {
      this.remoteLoading = true;
      queryDeviceTypeListApi(query, 10)
        .then(deviceTypeList => (this.deviceTypeList = deviceTypeList))
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    },
    remoteFactoryListSearch(query) {
      this.remoteLoading = true;
      queryFactoryListApi(query, 10)
        .then(factoryList => (this.factoryList = factoryList))
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    },
    getAMapData(amapData) {
      this.createForm.longitude = amapData.longitude;
      this.createForm.latitude = amapData.latitude;
      this.createForm.location = amapData.location;
    }
  }
};
</script>

<style lang="scss" scoped>
.page-container {
  padding: 10px;
}
.device-create-form {
  background-color: #fff;
  padding-top: 20px;
  width: auto;
  .lan-form {
    display: flex;
    width: 1300px;
    flex-direction: row;
    flex-wrap: wrap;
    .el-form-item {
    }
  }
}
.device-add-map {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
}
</style>
